<template>
    <div class="page full flex">
        <div class="layout-left">
            <MyCategoryTree @select="selectNode"></MyCategoryTree>
        </div>
        <div class="layout-right">
            <MyCategoryDetails ref="myCategoryDetails"></MyCategoryDetails>
        </div>
    </div>
</template>

<script setup lang="ts">
import MyCategoryTree from './CategoryTree.vue';
import MyCategoryDetails from './CategoryDetails.vue';

const myCategoryDetails = ref();

const selectNode = (data: any, node: any) => {
    const list: any[] = [];
    list.unshift({
        id: data.id,
        label: data.name,
    });
    let cNode = node;
    while (cNode.level > 1) {
        cNode = cNode.parent;
        list.unshift({
            id: cNode.data.id,
            label: cNode.data.name,
        });
    }
    if (data.level > 2) {
        myCategoryDetails.value.refresh(list, data.id);
    }
};
</script>

<style scoped>
.layout-left {
    width: 300px;
    height: 100%;
}
.layout-right {
    width: calc(100% - 300px);
    height: 100%;
}
</style>
